<template>
  <div class="approval-detail">
    <a-row class="relative">
      <a-col
        :md="{ span: 12, offset: 6 }"
        :xs="{ span: 24 }"
        class="relative bg-white"
      >
        <DetailShow :id="id" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "@vue/runtime-core";
import { useRoute } from "vue-router";
import DetailShow from "./modules/DetailShow.vue";

export default defineComponent({
  name: "ApprovalDetail",
  components: { DetailShow },
  setup() {
    const route = useRoute();
    const state = reactive({
      id: route.query.id,
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
.approval-detail {
  height: 100%;
  background: #f7f7f7;
  padding: 20px;
  .relative {
    height: 100%;
    position: relative;
  }
}
</style>
